<script setup lang="ts">
import { reactive } from "vue";
import TransformDom from "@/components/Transform.vue";

const state = reactive({
  list: [
    {
      title: "ppp",
      path: "/ppp",
      src: "https://img.cctvch.cn/uploads/6cfe8d143d05a0135b6e3ae8b78e7496.png",
    },
    {
      title: "碳索家",
      path: "/explore",
      src: "https://img.cctvch.cn/uploads/30bbfa0e78173ff96755acb7a1da45bf.png",
    },
    {
      title: "健康中国",
      path: "/health",
      src: "https://img.cctvch.cn/uploads/69a9c66820a8d91a15e615891c0a312e.png",
    },
    {
      title: "红色家书",
      path: "/redletter",
      src: "https://img.cctvch.cn/uploads/4bbc3823d9cb24dc00929359c39795a2.png",
    },
  ] as any[],
  current: 0,
  unit: 0,
  isScroll: false,
  timer: 0,
});
const handleChange = (num: number) => {
  state.current = state.list.length - 3 + num;
};
</script>

<template>
  <div class="key-box">
    <TransformDom :list="state.list" @change="handleChange"></TransformDom>
  </div>
  <div class="container">
    <div class="project-wrapper-item" v-if="state.current === 1">
      <div class="scroll-top flex">
        <div class="top-left">
          <p class="gray-title text-ellipsis">中央广播电视总台</p>
          <p class="title font-normal">
            传播医学价值，弘扬民族文化<br>《健康中国专题频道》
          </p>
        </div>
        <div class="top-right">
          <p class="gray-text font-m">
            为推进<span>“健康中国2030”</span>建设，提高人民健康水平，让老百姓享受改革红利,助力共建共享全民健康的战略主题，在此背景下<span>中央广播电视总台《健康中国》</span>专题频道应运而生。
          </p>
          <p class="gray-text font-m">
            频道内容包括<span>政策解读、产业观察、医改资讯、医疗卫生、养生保健、医药、食品和疾病</span>等；栏目涵盖<span>专题访谈、人物专访、纪录片、医学课堂</span>等多种形式。
          </p>
        </div>
      </div>
      <div class="scroll-box wrapper-1 flex">
        <div class="one flex-1">
          <div class="mb-4 flex">
            <div class="left"><img src="https://img.cctvch.cn/uploads/1d1b831e8a2d057bbad5ab545985b8c4.png" alt="" />
            </div>
            <div class="right flex-1 content">
              <div><img src="https://img.cctvch.cn/uploads/7d9586cf2716baf463b34f5e177e358b.png" alt=""></div>
              <div class="title my-1">中央广播电视总台央广网</div>
              <div>总期数：<span>102期</span></div>
              <div>参与访谈的医学专家人数：<span>院士8位，主任医师12位</span></div>
            </div>
          </div>
          <div class="bot"><img src="https://img.cctvch.cn/uploads/f7dd9cd9b6a1734dad9dbed91d2d6b0e.png" alt="" /></div>
        </div>
        <div class="two flex-1">
          <div class="mb-4 flex">
            <div class="left"><img src="https://img.cctvch.cn/uploads/35dc43804feca98efed34243640d24fa.png" alt="" />
            </div>
            <div class="right flex-1 content">
              <div><img src="https://img.cctvch.cn/uploads/7d9586cf2716baf463b34f5e177e358b.png" alt=""></div>
              <div class="title my-1">中央广播电视总台央广网</div>
              <div>全网播放总量：<span>1.8亿</span></div>
              <div>出品公司：<span>中视财华国际传媒有限公司</span></div>
            </div>
          </div>
          <div class="bot"><img src="https://img.cctvch.cn/uploads/6cf1bccf684de19941b27e211dbf1b9f.png" alt="" /></div>
        </div>
      </div>
    </div>
    <div class="project-wrapper-item" v-else-if="state.current === 2">
      <div class="scroll-top flex">
        <div class="top-left">
          <p class="gray-title text-ellipsis">中央广播电视总台</p>
          <p class="title font-normal text-ellipsis">
            【追寻 - 红色家书背后的故事】
          </p>
        </div>
        <div class="top-right">
          <p class="gray-text font-m">
            为<span>庆祝中国共产党建党一百周年</span>，由中央广播电视总台文艺之声、
            阅读之声共同推出的特别节目<span>《追寻 -
              红色家书背后的故事》</span>，于4月9日起隆重上线。
          </p>
          <p class="gray-text font-m">
            中视财华国际传媒作为该节目的总视觉设计方以及总后期制作方，深度参与节目的策划与制作。
          </p>
          <p class="gray-text font-m">
            自4月9日开播以来，《追寻》通过<span>“新视角、新形态、新表达”</span>回望百年党史，以真切的故事、真挚的情怀收获各方关注与好评。
          </p>
        </div>
      </div>
      <div class="scroll-box wrapper-2">
        <div class="one">
          <img src="https://img.cctvch.cn/uploads/87840319d664672028039d532067400f.png" alt="" />
        </div>
        <div class="two">
          <div class="ml-3">
            <div class="logo">
              <img src="https://img.cctvch.cn/uploads/38a03d7df1e60b0a3de57a4f53b12ebb.png" alt="" />
            </div>
            <div class="title">
              <div>#追寻党史百年记忆#</div>
              <div>#追寻红色家书背后的故事#</div>
            </div>
            <div class="content">
              截至目前，#追寻党史百年记忆#、#追寻红色家书背后的故事#微博双话题阅读量近6亿
            </div>
          </div>
          <div class="img">
            <img src="https://img.cctvch.cn/uploads/3a5fa16cc7c6862b7534e5688ea9de01.png" alt="" />
          </div>
        </div>
        <div class="three">
          <img class="img-1" src="https://img.cctvch.cn/uploads/08a5614238a785f9e25eedd132ec2fa8.png" alt="" />
          <img class="img-2" src="https://img.cctvch.cn/uploads/0053ef6d8e670159d7cf54b130911e5f.png" alt="" />
          <div class="content text-1">
            <div>播放总量</div>
            <div>超过900万</div>
          </div>
          <div class="content num-1">
            <div class="num">900</div>
            <div>万</div>
          </div>
          <div class="content text-2">
            <div>播放总量</div>
            <div>超过600万</div>
          </div>
          <div class="content num-2">
            <div class="num">600</div>
            <div>万</div>
          </div>
        </div>
        <div class="four">
          <div class="mb-3">
            <img src="https://img.cctvch.cn/uploads/3c2b1a932b590e199dcf8813e2d40955.png" alt="" />
          </div>
          <div class="content">
            在<span>央视新闻、央视频、云听、央广网、央视网、央视文艺</span>等平台覆盖用户达2.5亿人次
          </div>
        </div>
      </div>
    </div>
    <div class="project-wrapper-item" v-else-if="state.current === 3">
      <div class="scroll-top flex">
        <div class="top-left">
          <p class="gray-title text-ellipsis">中视财华国际传媒</p>
          <p class="title font-normal">
            与国家财政部PPP中心、发改委<br>达成长期合作关系
          </p>
        </div>
        <div class="top-right">
          <p class="gray-text font-m">
            PPP（Public-PrivatePartnership），又称PPP模式，即<span>政府和社会资本合作</span>，
            是公共基础设施中的一种项目运作模式。PPP模式鼓励政府与私营企业、民营资本进行合作，参与公共基础设施的建设，满足人民群众不断增加的多样化、高品质公共服务需求。
          </p>
          <p class="gray-text font-m">
            中视财华国际传媒与国家财政部PPP中心、发改委达成长期合作关系，是国内<span>专注于PPP项目宣传策划的传播机构</span>，是紧跟国家治理现代化，<span>供给侧结构性改革步伐的传播者。</span>
          </p>
        </div>
      </div>
      <div class="scroll-box wrapper-3 flex">
        <div class="one flex-1 mr-4">
          <div class="mb-5 flex">
            <div class="left mr-3"><img class="img1"
                src="https://img.cctvch.cn/uploads/ed9f0828501e790ae77b7a3f951036de.png" alt="" />
            </div>
            <div class="right flex-1 content">
              <div class="mb-1"><img class="img2"
                  src="https://img.cctvch.cn/uploads/fdf2c1ec488f52b178672a3146753989.png" alt="">
              </div>
              <div class="mb-5"><img class="img3"
                  src="https://img.cctvch.cn/uploads/b08135c53716c74a9413eaf57c3f7e3a.png" alt="">
              </div>
              <div>国内首部PPP项目专题宣传片：<span>《魅力PPP》</span></div>
              <div>PPP改革大型宣传片：<span>《PPP改革创新之路》、《PPP改革新时代》</span></div>
            </div>
          </div>
          <div class="bot"><img class="img4" src="https://img.cctvch.cn/uploads/10bb482443970bab5ca245496984674d.png"
              alt="" /></div>
        </div>
        <div class="two flex-1">
          <div class="mb-2 flex">
            <div class="left mr-2"><img class="img5"
                src="https://img.cctvch.cn/uploads/041da7f3778df26503f51c8205eeca04.png" alt="" />
            </div>
            <div class="right flex-1 content">
              <div class="title my-1">拍摄地点：横跨19省/自治区，32个城市<br>全网播放量：380万</div>
            </div>
          </div>
          <div><img class="img6" src="https://img.cctvch.cn/uploads/766bae3cb3bb0a142a1b161c4cdcdca0.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="project-wrapper-item" v-else>
      <div class="scroll-top flex">
        <div class="top-left">
          <p class="gray-title text-ellipsis">《中国碳索家》成就绿色新商业文明的传播者</p>
          <p class="title font-normal">
            探索低碳可持续发展的<br>新机遇 新路径 新产业
          </p>
        </div>
        <div class="top-right">
          <p class="gray-text font-m">
            2021年全国两会，政府工作报告中<span>“碳达峰”“碳中和”</span>，首次写入政府工作报告，<span>“双碳”目标已成为长期国家战略</span>，政策指导层面已经越来越清晰。
          </p>
          <p class="gray-text font-m">
            国家发改委、财政部中国清洁发展机制基金、央视网、清华大学、中国科学院大学、中关村绿色产业联盟，共同推出<span>《中国碳索家》大型融媒体节目</span>，展现中国为实现联合国《巴黎协定》与碳中和承诺所采取的政策和措施，体现大国担当。
          </p>
        </div>
      </div>
      <div class="scroll-box wrapper-4">
        <div class="flex mb-2">
          <div class="one">
            <div class="title mb-1">《中国碳索家》节目<br>双碳/专题/访谈类节目</div>
            <div class="content">深入展现中国碳中和进程中各个领域的探索者每一集详解一位“碳索家”</div>
          </div>
          <div class="two flex">
            <div class="title mr-4 flex-shrink">“碳达峰 碳中和”<br>双碳类峰会</div>
            <div class="content">
              <p>展+会结合</p>
              <p>搭建从政策到实施的全面交流合作平台</p>
            </div>
          </div>
          <div class="three flex">
            <div class="mr-4 flex-shrink">
              <div class="title flex-shrink">《中国碳索家》 杂志</div>
              <div><img class="img1" src="https://img.cctvch.cn/uploads/dc567bac5afc86889ca90d44fe9b44c6.png" alt="">
              </div>
            </div>
            <div class="content">
              <p>研究节能减碳路径，推动绿色循环发展</p>
              <p>探索双碳政策方针，助力“绿色中国”愿景</p>
            </div>
          </div>
        </div>
        <div>
          <img class="img2" src="https://img.cctvch.cn/uploads/fffcf91841e741829848787a3c6edc1f.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.key-box {
  padding-top: 50px;
  overflow: hidden;
  width: 1440px;
  // min-width: 1440px;
  // max-width: 1920px;
  margin: 0 auto;
}

.project-wrapper-item {
  .title {
    background: linear-gradient(to right, #221a8a 0%, #ff000a 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }

  .content {
    font-size: 16px;
    line-height: 26px;

    .tit {
      margin-bottom: 10px;
      font-size: 18px;
      color: #000;
      font-weight: bold;
    }

    p:not(:last-child) {
      margin-bottom: 22px;
    }

    span {
      color: #B40606;
      font-weight: bold;
    }
  }
}

.scroll-top {

  height: 123px;
  margin-bottom: 16px;

  .top-left {
    margin-right: 115px;
    width: 320px;

    .title {
      font-size: 18px;
      line-height: 30px;
    }

    .gray-title {
      line-height: 24px;
      color: #9195a3;
    }
  }

  .top-right {
    width: 1005px;

    .gray-text {
      margin-bottom: 8px;
      color: #626675;

      span {
        color: #990E0E;
        font-weight: bold;
      }
    }
  }
}

.scroll-box {
  position: relative;
  margin-bottom: 40px;
}

.wrapper-1 {
  .left {
    width: 180px;
    margin-right: 60px;
  }

  .right {
    img {
      width: 59px;
      height: 25px;
    }
  }

  .one {
    .left {
      img {
        width: 176px;
        height: 67px;
      }
    }

    .bot {
      padding-left: 80px;

      img {
        width: 507px;
        height: 301px;
      }
    }
  }

  .two {
    .left {
      img {
        width: 155px;
        height: 68px;
      }
    }

    .bot {
      img {
        width: 515px;
        height: 293px;
      }
    }
  }
}

.wrapper-2 {
  margin-bottom: 40px;
  display: flex;

  >div {
    height: 470px;
    flex-shrink: 0;
  }

  .one {
    width: 100px;
    margin-right: 10px;

    img {
      width: 97px;
      height: 88px;
    }
  }

  .two {
    width: 370px;
    margin-right: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .logo {
      height: 50px;
      margin-bottom: 5px;

      img {
        width: 108px;
        height: 47px;
      }
    }

    .title {
      margin-bottom: 35px;
      font-size: 18px;
      line-height: 30px;
    }

    .img {
      width: 370px;
      height: 235px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .three {
    position: relative;
    width: 550px;

    .content {
      display: none;
    }

    .img-1 {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 453px;
      height: 470px;
    }

    .img-2 {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 259px;
      height: 308px;
    }

    >div {
      position: absolute;
      line-height: 26px;
      text-align: center;
    }

    .text-1 {
      right: 100px;
      top: 80px;
      width: 80px;
    }

    .text-2 {
      right: 10px;
      top: 170px;
      width: 80px;
      text-align: left;
    }

    .num-1,
    .num-2 {
      width: 74px;
      height: 74px;
    }

    .num-1 {
      top: 0;
      right: 100px;
    }

    .num-2 {
      top: 160px;
      right: 97px;
    }

    .num {
      padding-top: 20px;
      font-size: 30px;
      font-weight: bold;
      font-family: Arial;
    }
  }

  .four {
    width: 215px;
    padding-bottom: 40px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    img {
      width: 155px;
      height: 67px;
    }
  }
}

.wrapper-3 {
  .img1 {
    width: 93px;
    height: 109px;
  }

  .img2 {
    width: 191px;
    height: 26px;
  }

  .img3 {
    width: 217px;
    height: 27px;
  }

  .img4 {
    width: 642px;
    height: 216px;
  }

  .img5 {
    width: 339px;
    height: 73px;
  }

  .img6 {
    width: 514px;
    height: 362px;
  }
}

.wrapper-4 {
  .content {
    p {
      margin-bottom: 10px !important;
    }
  }

  .one {
    width: 340px;
    margin-right: 110px;
  }

  .two {
    width: 360px;
    margin-right: 150px;

    .title {
      width: 120px;
    }
  }

  .three {
    width: 380px;

    .mr-5 {
      width: 150px;
    }
  }

  .img1 {
    width: 60px;
    height: 42px;
    margin-top: 14px;
  }

  .img2 {
    width: 1440px;
    height: auto;
  }
}
</style>
